<template>
	<view class="container">
		<view class="topstart"></view>
		<view class="imag">
			<image
				src="https://cdn4.codesign.qq.com/screen-slices/2024/10/24/AE9KQ24VXEeW10gGYZl24/jk4naj4thvwm0e4v/7b51b951-673b-4392-9b45-85b33a980ab8.png?imageMogr2/thumbnail/700x650/interlace/1"
				mode=""></image>
		</view>
		<view class="signin">
			<view class="notice" @click="logon">
				<uni-icons type="left" size="18" color="#333333"></uni-icons>
			</view>
			<view class="notsignedin">
				签到领积分
			</view>
			<view class="rule" @click="rule =!rule">
				积分规则
				<view class="jifen" v-if="rule">
					积分规则：每日签到可得积分，推荐好友之后，你的推荐用户购买商品后可返积分
				</view>
			</view>
		</view>
		<view class="headerbox">
			<view class="details">
				<view class="name">{{totalpoints}}
					<view class="texe">积分</view>
				</view>
				<view class="namea" v-if="checkinornot">
					已签到
				</view>
				<view class="namea" @click="memberSigna" v-else>
					立即签到
				</view>
			</view>
			<view>
				<image class="boximg" src="../../static/375.png" mode=""></image>
			</view>
		</view>
		<view class="dindganboxa">
			<!-- <view class="dindganbox_title">
				<view class="left">已连签3天</view>
			</view> -->
			<view class="xiaobox" v-for="(item,index) in givenDates" :key="index">
				<view class="orange" v-if="item.isMatch">
					<view class="orangetext">
						+2
					</view>
					<image src="../../static/352.png" mode=""></image>
				</view>
				<view class="orangea" v-else>
					<view class="orangetext">
						+2
					</view>
					<image class="orangeyuan" src="" mode=""></image>
				</view>
				<view class="orangenanme">
					{{item.naem}}
				</view>
			</view>
		</view>
		<view class="dindganbox">
			<view class="dindganbox_title">
				<view class="left">兑换商品</view>
				<view class="right"></view>
			</view>
			<view class=" list" v-for="(item,index) in alllist" :key="index" @click="toshopinfos(item,item.id)">
				<view class="img">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="text">
					<view class="name">
						<text>{{item.title}}</text>
					</view>
					<view class="introduce">
						{{item.chapterDetail}}
					</view>
					<view class="low">
						<view class="theheart">
							<image v-if="item.isCollect == 1" src="../../static/311.png" mode="">
							</image>
							<image v-if="item.isCollect == 2" src="../../static/313.png" mode="">
							</image>
						</view>
						<view class="money">
							<text>￥</text>
							{{item.price}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getSignForWeek, //获取本周签到记录
		groupGoods,
		isSign, //判断今天是否签到
		memberSign, //// app签到接口
		getPointByMemberId, //积分总数
		coursepage, //推荐或者是不推荐
	} from "../../request/api.js"
	export default {
		data() {
			return {
				jiamiinfo: {}, //手机号信息
				userInfo: null,
				param1: '',
				uid: '',
				show: false,
				denglumtk: false,
				wx: true,
				duihao: true,
				yuanqunaduig: false,
				money: {
					allIncome: '0',
					takeableIncome: '0'
				},
				hide: '',
				givenDates: [{
						naem: '周一',
						id: 1
					},
					{
						naem: '周二',
						id: 2
					},
					{
						naem: '周三',
						id: 3
					},
					{
						naem: '周四',
						id: 4
					},
					{
						naem: '周五',
						id: 5
					},
					{
						naem: '周六',
						id: 6
					},
					{
						naem: '周日',
						id: 7
					},
				],
				days: [], // 存储一周的星期几
				list: [],
				checkinornot: '',
				totalpoints: 0,
				alllist: [],
				rule: false
			}
		},
		onLoad(e) {

		},
		onShow() {
			this.getPointByMemberIda()
			// this.groupGoodsa()
			this.getSignForWeeka()
			this.coursepageb()
			this.isSigna() //判断今天是否签到
		},
		methods: {
			//前往商品详情页
			toshopinfos(item, id) {
				getApp().globalData.details = item
				uni.navigateTo({
					url: '/pages/details/index?id=' + id
				})
			},
			// rule() {
			// 	uni.navigateTo({
			// 		url: '/pages/my/pointsrule'
			// 	})
			// },
			//全部商品
			coursepageb() {
				coursepage({
					memberId: uni.getStorageSync('userInfo').id,
					isHot: 2
				}).then(res => {
					console.log(res);
					this.alllist = res.result.records
				})
			},

			getPointByMemberIda() {
				getPointByMemberId({
					memberId: uni.getStorageSync('userInfo').id
				}).then(res => {
					console.log(res, '积分');
					this.totalpoints = res.result.sumPoint
					console.log(res.result.sumPoint);
				})
			},
			memberSigna() {
				memberSign({
					memberId: uni.getStorageSync('userInfo').id
				}).then(res => {
					console.log(res);
					this.isSigna()
					this.getPointByMemberIda()
					this.getSignForWeeka()
				})
			},
			isSigna() {
				isSign({
					memberId: uni.getStorageSync('userInfo').id
				}).then(res => {
					console.log(res);
					this.checkinornot = res.result
				})
			},
			// rq() {
			// 	const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			// 	this.givenDates.forEach(date => {
			// 		const [year, month, day] = date.signDate.split('-');
			// 		const givenDate = new Date(year, 10 - 1, day);
			// 		const dayOfWeek = weekDays[givenDate.getDay()];
			// 		console.log(`${date.signDate} 是 ${dayOfWeek}`);
			// 		this.days.push(dayOfWeek);
			// 	});
			// 	console.log(this.days);
			// },
			toshopinfo(id) {
				uni.navigateTo({
					url: '/pages/classification/goods?id=' + id
					// url: '/pages/goodsinfo/index'
				})
			},
			groupGoodsa() {
				groupGoods().then(res => {
					console.log(res);
					this.list = res.result
				})
			},
			getSignForWeeka() {
				getSignForWeek({
					memberId: uni.getStorageSync('userInfo').id
				}).then(res => {
					console.log(res);
					this.days = res.result
					for (let i = 0; i < this.days.length; i++) {
						const day = this.days[i];
						for (let j = 0; j < this.givenDates.length; j++) {
							const givenDate = this.givenDates[j];
							if (day.weekDay === givenDate.id) {
								givenDate.isMatch = true;
								break;
							}
						}
					}
					console.log(this.givenDates);

					// this.rq()
				})
			},
			disableStatuss() {
				disableStatus().then(res => {
					console.log(res, 'aa');
					this.hide = res.result
				})
			},
			takeableIncomea() {
				let uid = uni.getStorageSync('userInfo').id
				takeableIncome(uid).then(res => {
					console.log(res);
					this.money = res.result
				})
			},
			logon() {

				uni.navigateBack({

				})
			},
			signin() {
				uni.navigateTo({
					url: '/pages/my/signin'
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.theheart {
		display: flex;
		// align-items: flex-end;

		.hong {
			color: #d73c38;
			font-size: 25rpx;
			font-weight: 500;
			margin-right: 10rpx;

		}

		.hui {
			color: #3333334d;
			font-size: 20rpx;
			font-weight: 400;
			margin-right: 15rpx;
			// text-decoration: line-through;
		}
	}

	.imag {
		height: 1124rpx;
		width: 100%;
		position: absolute;
		top: -100rpx;
		left: 0;
		z-index: -1;

		image {
			height: 1124rpx;
			width: 100%;
		}
	}

	.modtBox {
		// height: 148rpx;
		z-index: 9;
		border-radius: 20rpx;
		margin: 30rpx;
		padding-bottom: 20rpx;
		padding-left: 50rpx;
		padding-right: 200rpx;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		position: relative;

		.image {
			height: 100%;
			width: 100%;
			position: absolute;
			left: 0;
			z-index: -1;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.modtBox-a {
			padding: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 12px;
			font-weight: 500;
			margin-top: 20rpx;
			margin-right: 20rpx;

			.modtBox-a-a {
				display: flex;
				align-items: center;

				.text {
					color: #ffffff;
					text-align: left;
					font-size: 24rpx;
					font-weight: 500;
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.modtBox-a-b {
				// margin-top: 20rpx;
				color: #ffffff;
				font-size: 56rpx;
				font-weight: 900;
			}

			.modtBox-a-c {
				margin-top: 20rpx;
				color: #ffffff;
				font-size: 32rpx;
				font-weight: 900;
			}
		}

		.modtBox-b {
			width: 184rpx;
			height: 86rpx;
			margin-top: 20rpx;
			position: absolute;
			right: -20rpx;
			top: 40rpx;

			image {

				width: 184rpx;
				height: 86rpx;
			}
		}
	}

	.longb {
		display: flex;
		justify-content: center;
		align-items: center;

		.long {
			margin-right: 40rpx;
			text-align: center;

			.jine {
				margin-bottom: 30rpx;
			}

			.mz {
				font-size: 43rpx;
			}
		}
	}

	.yuedu {
		// width: 54rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		line-height: 100rpx;
	}

	.yuedu image {
		width: 30rpx;
		height: 30rpx;
	}

	.dangchukuan {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.7);
		// opacity: 0.7;
		position: absolute;
		left: 0;
		top: 0;
		// left: 50%;
		// top: 50%;
		// transform: translate(-50%, -50%);
		z-index: 99;
	}

	.neirdeli {
		width: 700rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		// margin-top: 400rpx;
		position: absolute;
		// left: 0;
		// top: 0;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 20rpx;
		padding-bottom: 34rpx;
		box-sizing: border-box;

	}

	.getphonebtn {
		// width: 100%;
		// height: 100%;
		width: 300rpx;
		height: 100rpx;
		background-color: #0055B8;
		// margin-top: 30rpx;
		font-size: 30rpx;
		display: flex;
		color: #FFFFFF;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		border: 1rpx solid #eee;
	}

	.titlebiaoti {
		width: 700rpx;
		height: 200rpx;
		text-align: center;
		font-size: 43rpx;
		line-height: 300rpx;
		// border-bottom: 2rpx solid #55ff00;
	}

	.qianqudenglu {
		width: 700rpx;
		height: 200rpx;
		text-align: center;
		display: flex;
		background-color: #FFFFFF;
		line-height: 200rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		border-radius: 20rpx;

	}

	button::after {
		border: none;
	}

	button {
		border: none !important;
		padding: 0;
		color: #333;
		background-color: #fff;
	}

	.yuedu {
		display: flex;
	}

	.xiamian {
		width: 700rpx;
		height: 100rpx;
		text-align: center;
		display: flex;
		background-color: #FFFFFF;
		line-height: 200rpx;
		color: #000000;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		padding-left: 34rpx;
		box-sizing: border-box;

	}

	.zhiti {
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 4rpx;
		font-size: 24rpx;
	}

	.yogh {
		color: #0055B8;
	}

	.yiexsi {
		color: #0055B8;
	}

	.denglua {
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.aaa {
			text-align: center;

			.getinfobtn {
				background: #FBF2E7;
			}

			.aaabi {
				margin-top: 25rpx;
			}
		}


	}

	.topstart {
		height: var(--status-bar-height);
	}

	.header {
		text-align: center;
		color: #170000;
		font-size: 36rpx;
		margin-bottom: 30rpx;
	}

	.container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background-size: 100% auto;
		padding: 20rpx 0;
		position: relative;
		z-index: 2;
		background: #f4f5f9;

		.signin {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			// dftext-align: right;
			padding-left: 42rpx;
			padding-right: 28rpx;

			.notsignedin {
				color: #333333;
				font-size: 32rpx;
				font-weight: 500;
			}

			.rule {
				color: #999999;
				font-size: 24rpx;
				font-weight: 400;
				position: relative;

				.jifen {
					width: 400rpx;
					// height: 50rpx;
					position: absolute;
					left: -300rpx;
					padding: 12rpx;
					background-color: #fff;
					z-index: 100;
					border-radius: 34rpx;

				}
			}

		}

		.headerbox {
			padding-left: 30rpx;
			width: 100%;
			// height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding-right: 400rpx;
			// position: relative;
			color: #333333;

			.getinfobtn {
				border: none;
			}

			.boximg {
				// margin-right: 50rpx;
				width: 430rpx;
				height: 378rpx;
				border-radius: 70rpx;
			}

			.details {
				// margin-left: 32rpx;
			}

			.name {
				color: #333333;
				font-size: 72rpx;
				font-weight: 700;
				margin-bottom: 16rpx;
				display: flex;
				align-items: flex-end;

				.texe {
					color: #333333;
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 15rpx;
					margin-left: 10rpx;
				}
			}

			.namea {
				width: 224rpx;
				height: 70rpx;
				// padding: 8rpx 16rpx;
				border-radius: 126rpx;
				background: #FCE7D1;
				color: #ffaf5a;
				font-size: 32rpx;
				font-weight: 500;
				text-align: center;
				line-height: 70rpx;

				.nameatext {}
			}

			.phone {
				font-size: 22rpx;
			}

		}

		.dindganboxa {
			// width: 92%;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 30rpx;
			margin-top: 0;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 20rpx;

			.dindganbox_title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 30rpx;

				.left {
					font-size: 30rpx;
					font-weight: 700;
					color: #332B1F;
				}

				.right {
					font-size: 24rpx;
					color: #B0B0B0;
					display: flex;

					image {
						width: 11rpx;
						height: 20rpx;
					}
				}
			}

			.xiaobox {
				text-align: center;
				font-size: 24rpx;
				color: #333;
				// width: 13%;
				width: 70rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				margin-right: 22rpx;
				// position: relative;
				// table-layout:;

				.orange {
					width: 100%;
					height: 104rpx;
					border-radius: 10rpx;
					// opacity: 1;
					background: #fff6ed;
					margin-bottom: 15rpx;
					text-align: center;
					padding-top: 15rpx;

					.orangeyuan {
						width: 30rpx;
						height: 30rpx;
						border-radius: 50rpx;
						background: #333333;
					}

					.orangetext {
						color: #ff9c33;
						font-size: 28rpx;
						font-weight: 500;
						margin-bottom: 15rpx;
					}

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.orangea {
					width: 100%;
					height: 104rpx;
					border-radius: 10rpx;
					// opacity: 1;
					background: #ededed;
					margin-bottom: 15rpx;
					text-align: center;
					padding-top: 15rpx;

					.orangeyuan {
						width: 30rpx;
						height: 30rpx;
						border-radius: 50rpx;
						background: #333333;
					}

					.orangetext {
						color: #333;
						font-size: 28rpx;
						font-weight: 500;
						margin-bottom: 15rpx;
					}

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.orangenanme {
					color: #9e9e9e;
					font-size: 20rpx;
					font-weight: 500;
				}

				image {
					display: block;
					width: 50rpx;
					height: 50rpx;
					margin-left: auto;
					margin-right: auto;
					margin-bottom: 10rpx;
				}
			}
		}

		.dindganbox {
			// width: 92%;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 30rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: left;
			flex-wrap: wrap;

			.dindganbox_title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 30rpx;
				padding-bottom: 0;

				.left {
					color: #333333;
					font-size: 32rpx;
					font-weight: 700;
				}

				.right {
					font-size: 24rpx;
					color: #B0B0B0;
					display: flex;

					image {
						width: 11rpx;
						height: 20rpx;
					}
				}
			}

			.xiaobox {
				// text-align: center;
				padding: 0rpx 30rpx;
				font-size: 24rpx;
				color: #333;
				width: 100%;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				border-bottom: 4rpx solid #f6f6f6;
				padding-bottom: 15rpx;

				image {
					width: 328rpx;
					height: 166rpx;
					border-radius: 10rpx;
					margin-right: 18rpx;
				}

				.you {
					width: 100%;

					.title {
						color: #0c0c0c;
						font-size: 32rpx;
						font-weight: 700;
						width: 400rpx;
						overflow: hidden;
						/* 确保内容超出容器时会被隐藏 */
						white-space: nowrap;
						/* 确保文本在一行内显示，避免换行 */
						text-overflow: ellipsis;
					}

					.course {
						color: #3333334d;
						font-size: 24rpx;
						font-weight: 500;
						width: 300rpx;
						overflow: hidden;
						/* 确保内容超出容器时会被隐藏 */
						white-space: nowrap;
						/* 确保文本在一行内显示，避免换行 */
						text-overflow: ellipsis;
					}

					.redeem {
						width: 100%;
						display: flex;
						align-items: flex-end;
						// justify-content: space-between;

						.points {
							color: #d73c38;
							font-size: 24rpx;
							font-weight: 500;
						}

						.exchange {
							width: 148rpx;
							height: 54rpx;
							border-radius: 82rpx;
							background: #ff9c33;
							color: #ffffff;
							text-align: center;
							font-size: 24rpx;
							font-weight: 500;
						}
					}
				}
			}
		}
	}

	.ada {
		width: 34rpx;
	}

	.list {
		height: 216rpx;
		border-radius: 22rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		padding: 22rpx 26rpx 28rpx 18rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.img {
			width: 328rpx;
			height: 166rpx;

			image {
				width: 328rpx;
				height: 166rpx;
			}
		}

		.text {
			margin-left: 20rpx;

			.name {
				width: 288rpx;
				color: #000000;
				font-size: 28rpx;
				font-weight: 700;
				// margin: 38rpx 0 26rpx;

				text {
					overflow: hidden;
					/* 确保内容超出容器时会被隐藏 */
					white-space: nowrap;
					/* 确保文本在一行内显示，避免换行 */
					text-overflow: ellipsis;
				}
			}

			.introduce {
				color: #3333334d;
				font-size: 24rpx;
				font-weight: 500;
				margin-top: 18rpx;
				margin-bottom: 22rpx;
			}

			.low {
				display: flex;
				justify-content: space-between;

				.theheart {
					width: 48rpx;
					height: 48rpx;

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.money {
					color: #d73c38;
					font-size: 36rpx;
					font-weight: 500;

					text {
						color: #d73c38;
						font-size: 24rpx;
						font-weight: 500;

					}
				}
			}
		}
	}
</style>